<template>
    <view class="app">
        <load :ready="ready"></load>
		<view class="fixed-head">
			<u-tabs  :list="navlist" active-color="#497CD0" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<u-gap height="80"></u-gap>
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in list" :key="item.id">
				<!-- {{item.orderStatus}} -->
				<view class="order-head">
					<text class="num">下单时间：{{item.create_time}}</text>
				</view>
				
				<view class="goods-list"  @click="link(`./order_info?id=${item.id}`)">
					<view class="goods-item" v-for="(goods, idx) in item.goods">
						<u-image :src="goods.image" border-radius="16" width="128" height="128"></u-image>
						<view class="info">
							<view class="goods-name txt-hide">{{goods.goods_name}}</view>
							<view class="attr">
								{{goods.description}}
							</view>
							<view class="pricebox">
								<view class="price">
									¥ <text  style="padding-left: 4px;">{{goods.goods_price}}</text>
								</view>
								<view class="num">x {{goods.goods_num}}</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="order-foot">
					<view class="left">
						实际付款金额 
						<text style="padding-left: 4px;">¥{{item.order_amount}}</text>
					</view>
					<view class="btnbox">
						<view class="btns" style="width: 164rpx;">
							<u-button class="btn" @click="link(`./order_info?id=${item.id}`)" type="primary" :custom-style="btnStyle" size="medium">查看详情</u-button>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
	
	
		<list-tip :notData="listTip.notData" :isPage="listTip.isPage" :isLoading="listTip.isLoading">
		    <u-empty slot="notdata" text="暂无数据"  margin-top="100"></u-empty>
		</list-tip>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
            // ready: true,
			
			navlist:[
				{
				name:'待配送',
				id:1,
			},{
				name:'已完成',
				id:2,
			},],
			current: 0,
			btnStyle:{
				background: '#497CD0',
				borderRadius: '16px',
				padding:'0 15px',
			},
			list:[],
			listTip: {},
			orderSn:'',
			info:{},
			total:'',
        };
    },
    onLoad(o) {
		if(o.current){
			this.current = o.current
		}
        that = this;
    },
    onReady() {
    },
   onShow() {
   	this.$list.init(this);
	this.listTip.size = 20;
   	this.getList();
   },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
    	this.$list.onReachBottom(this)
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		handlePrint(item, index){
			this.$common.showTip('功能开发中')
		},
		onSearch(){
			this.$list.init(this);
			this.listTip.size = 20;
			this.getList();
		},
		async getList() {
		    let listTip = this.listTip;
		    let res = {};
		    let params = {
		        pageNum: listTip.p,
		        pageSize: listTip.size,
				order_status: this.navlist[this.current].id,
				// order_status:0,
		    };
			// if(this.current>0){
			// 	params.order_status= this.navlist[this.current].id
			// }
		    try {
		        res = await this.$api.myOrder(params);
		    } catch (e) {
		        uni.hideLoading();
		        console.log('err', e);
		    }
		    if (res.data.code == this.$config.RESOK) {
		       let list = res.data.data.data || [];
			   list.forEach(item=>{
				   item.goods.forEach(goods=>{
					   // goods.image = this.$config.httpImgs + goods.image
				   })
			   })
		       let setdata = this.$list.normalData(list, this);
		       this.list = setdata.list;
		       this.listTip = setdata.listTip;
			   this.total = res.data.data.total;
		       if (setdata.list.length >= res.data.total && listTip.p > 1 || !list.length) {
		           this.$list.notdata(this);
		       } 
		    } 
		},
		change(e){
			console.log(e);
			this.current = e;
			this.$list.init(this);
			this.listTip.size = 20;
			this.getList();
		},
		handleTab(e){
			this.tab = e;
			this.$list.init(this);
			this.listTip.size = 20;
			this.$nextTick(()=>{
				this.current = 0
				this.getList();
			})
		},
        ...mapActions([])
    },
    computed: {
		list2(){
			return this.list.filter(item=>item.orderStatus != 11 && item.orderStatus != 1 && item.orderStatus != 10)
		},
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: $uni-bg-color-grey;
}

.tab-wrap{
	display: flex;
	width: 100%;
	text-align: center;
	height: 90rpx;
	line-height: 90rpx;
	border-bottom: 2px solid #eee;
	.tab-item{
		width: 50%;
		font-size: 16px;
		&.active{
			border-bottom: 4px solid $color;
			color: $color;
		}
	}
}
.fixed-head{
	padding: 0 30rpx;
	background: #fff;
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 99;
}
.searchbox{
	display: flex;
	height: 80rpx;
	align-items: center;
	background: #F6F8FB;
	padding: 0 20rpx;
	margin: 10rpx  0 0;
	border-radius: 5px;
	.icon{
		width: 20px;
		height: 20px;
	}
	.input{
		font-size: 15px;
		padding: 0 20rpx;
		flex: 1;
	}
	.btn-search{
		background: $color;
		color: #fff;
		border-radius: 5px;
		height: 60rpx;
		line-height: 60rpx;
		width: 120rpx;
		text-align: center;
	}
}
.h260{
	height: 260rpx;
}
.h170{
	height: 170rpx;
}

.order-list{
	padding: 20rpx 30rpx 0;
	.order-item{
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 12px;
		padding: 0 30rpx;
		&.package{
			background:#f1f7fd;
		}
	}
	.order-head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 0;
	}
	
	.order-foot{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		.left{
			font-size: 14px;
			text{
				color: $color-red;
				font-size: 16px;
			}
		}
	}
	.btnbox{
		display: flex;
		.btns{
			margin-left: 5px;
		}
	}
}


.goods-list{
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 10rpx 0;
	.goods-item{
		padding: 10rpx 0;
		display: flex;
		justify-content: space-between;
	}
	.info{
		flex: 1;
		width: 480rpx;
		padding-left: 20rpx;
	}
	.goods-name{
		line-height: 26px;
		font-size: 14px;
		font-weight: bold;
	}
	.attr{
		font-size: 12px;
		color: #979797;
		margin-bottom: 2px;
	}
	.pricebox{
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.num{
		font-size: 13px;
		color:#666;
	}
	.price{
		font-size: 12px;
		color: $color-red;
		text{
			font-size: 15px;
		}
	}
	.desc{
		display: flex;
		justify-content: space-between;
	}
}

</style>
